<template>
    <div class="professor_jyjl">
       <!-- <router-view/>-->
        <div class="layout">
            
            <div class="table">
              
                <div>
                    <div><h3>教育经历管理</h3></div>
                     <div>

    <!-- 卡片视图区域 -->
    <el-card style="margin-top: 20px">
        <el-row :gutter="20">
            <!-- 新增按钮 -->
          <el-col :span="8">
              <el-button
                type="primary"
                @click="adds()"
                icon="el-icon-circle-plus"
                >新增</el-button>
          </el-col>
        </el-row>

        <!-- 动态用户列表 -->
        <el-table :data="tableData" stripe style="width: 100%" border >
          <el-table-column v-for="column in columns" :key='column.field'
          	:label="column.title" :prop="column.field" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="editShow(scope.row)" type="warning" size="mini">修改</el-button>
              <el-button @click="del(scope.row)" type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
		
        <!-- 添加弹出框 -->
        <el-dialog title="编辑页" :visible.sync="el_show" :append-to-body="true">
          <el-form :model="study">
            <el-form-item label="编号">
              <el-input
                placeholder="请输入编号"
                v-model="study.id"
                autocomplete="off"
              ></el-input>
            </el-form-item>
			<el-form-item label="学校名称">
			  <el-input
			    placeholder="请输入学校名称"
			    v-model="study.school"
			    autocomplete="off"
			  ></el-input>
			</el-form-item>
			<el-form-item label="学历">
			  <el-select v-model="study.education" placeholder="请选择">
			      <el-option
			        v-for="item in options"
			        :key="item.value"
			        :label="item.label"
			        :value="item.value">
			      </el-option>
			  </el-select>
			</el-form-item>
            <el-form-item label="开始日期">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="study.startDate"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="study.endDate"></el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                placeholder="请输入备注"
                v-model="study.remark"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="edit()">编 辑</el-button>
            <el-button @click="err()">取 消</el-button>
          </div>
        </el-dialog>
     
      <!-- 分页 -->
      <!--      <el-pagination layout="total, sizes, prev, next, pager, jumper"
            	@size-change="sizeChange"
            	@current-change="currentChange"
            	:page-sizes="[2, 5, 10, 50]" :page-size="2" :total="total" >
            </el-pagination> -->
			
    </el-card>
  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
	import axios from 'axios';
export default {
    data() {
		return {
			options: [{
			          value: 0,
			          label: '大专'
			        },{
			          value: 1,
			          label: '本科'
			        },{
			          value: 2,
			          label: '硕士'
			        }],
					value:"",
			columns:[
				{title:"编号",field:"id"},
				{title:"学校名称",field:"school"},
				{title:"学历",field:"education"},
				{title:"开始日期",field:"startDate"},
				{title:"结束日期",field:"endDate"},
				{title:"备注",field:"remark"},
			],
			tableData:[{id:"1",school:"湖南师范大学",education:"大学",startDate:"2011-12-23",endDate:"2014-12-23",remark:"123"},
			{id:"2",school:"华南师范大学",education:"博士",startDate:"2012-12-23",endDate:"2015-12-23",remark:"456"},
			{id:"3",school:"河南师范大学",education:"硕士",startDate:"2013-12-23",endDate:"2016-12-23",remark:"789"}],
			el_show: false,
			resumeid:"102",
			modify:"0",
			study:{
				id:"",
				school:"",
				education:null,
				startDate:"",
				endDate:"",
				remark:"",
				resumeid:"",
				isdelete:false
			}
		}
    },
    mounted() {
  		this.list();
    },
    methods: {
		list(){
				  axios.get("http://localhost:9001/resume-study-experience/list",
				  {params:{
					  resumeid:this.resumeid
				  }}).then((response)=>{
					  console.log(response.data);
					  for (var i = 0; i < response.data.length; i++) {
						  this.tableData=response.data;
						  if(response.data[i].education=="0"){
							  response.data[i].education="大专";
						  }else if(response.data[i].education=="1"){
							  response.data[i].education="本科";
						  }else if(response.data[i].education=="2"){
							  response.data[i].education="硕士";
						  }else{
							  response.data[i].education="";
						  }
						  this.tableData=response.data;
					  }
				  });
		},
		// 添加
		adds: function () {
			
			this.modify="0",
			this.study.id="",
			this.study.school="",
			this.study.education=null,
			this.study.startDate=null,
			this.study.endDate=null,
			this.study.remark=""
			this.study.resumeid=this.resumeid,
			this.study.isdelete=false,
			this.el_show = true
		},
		err: function () {
			this.el_show = false
		},
		edit(){
			
			
			
			//新增或修改提交 post
			axios.post("http://localhost:9001/resume-study-experience/edit",
			{
				id:this.study.id,
				school:this.study.school,
				education:this.study.education,
				startDate:this.study.startDate,
				endDate:this.study.endDate,
				remark:this.study.remark,
				modify:this.modify,
				resumeid:this.study.resumeid,
				isdelete:this.study.isdelete
			}).then((response)=>{
				console.log(response);
				//更新列表
				this.list();
				this.el_show=false;
			});
		},
		editShow(v){
			console.log(v.id);
			axios.get("http://localhost:9001/resume-study-experience/getById",
			{
				params:{id:v.id},
			}).then((response)=>{
				console.log(response.data.education);
				this.study=response.data;
				this.modify=1;
				this.el_show=true;				
			});
		},
		del(v){
			console.log(v.id);
			//是否删除
			if(confirm("是否删除?")){
				//删除请求 empno
				axios.get("http://localhost:9001/resume-study-experience/del",{
					params:{
						id:v.id,
						},}).then((response)=>{
					console.log(response);
					//更新列表 
					this.list();
				})
			}
		}
	}
}
</script>
<style scoped>
    h2,h3{
        width: 150px;
        margin: 20px auto;
    }
    .professor_jyjl{
        width: 100%;
        height: 100%;
    }
    .layout{
        width: 100%;
        height: 100%;
    }
    .table{
        width: calc(100% - 100px);
        margin: 0 50px;
        padding: 0 10px;
        height: 100%;
        border: 1px solid #000;
        background-color: #EFEFEF;
    }
    .one{
        width: calc(100% - 40px);
        height: 50px;
        display: flex;
        margin: 20px;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #000;
    }
    .one input{
        margin: 0 20px;
    }
    .two{
        width: 100%;
    }
</style>